<template>
<pullRefresh @refresh="toRefresh">
	<div id="home">
	  <!-- 公告 -->
	  <div id="notice">
	  	<div class="iconfont icongonggao"> 公告 : </div>
	  	<div class="txt">
	  		<a @tap="$router.push({path:'/notice'})">{{notice}}</a>
	  	</div>
	  </div>
	  <!-- 轮播图 -->
		<div class="mui-slider">
		  <div class="mui-slider-group mui-slider-loop">
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#"><img src="../../assets/img/slider3.jpg"></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../assets/img/slider1.jpg"></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../assets/img/slider2.jpg"></a>
			</div>
			<div class="mui-slider-item">
				<a href="#"><img src="../../assets/img/slider3.jpg"></a>
			</div>
			<!--支持循环，需要重复图片节点-->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#"><img src="../../assets/img/slider1.jpg"></a>
			</div>
		  </div>
		  <div class="mui-slider-indicator">
			  <div class="mui-indicator mui-active"></div>
			  <div class="mui-indicator"></div>
			  <div class="mui-indicator"></div>
		  </div>
		</div>
	  <!-- 桌面菜单 -->
	  <div id="desktop-menu">
	  	<div class="item">
	  		<a @tap="$router.push({path:'/addMoney'})" style="background:#6641E2;">
	  			<span class="iconfont iconchongzhi"></span>
	  		</a>
	  		<span>充值</span>
	  	</div>
	  	<div class="item">
	  		<a @tap="$router.push({path:'/withdraw'})" style="background:#EC971F;">
	  			<span class="iconfont icontikuanjilu"></span>
	  		</a>
	  		<span>提现</span>
	  	</div>
	  	<div @tap="showCustomer=true" class="item">
	  		<a style="background:#2AC845;">
	  			<span class="iconfont iconkefu"></span>
	  		</a>
	  		<span>客服</span>
	  	</div>
	  	<div class="item">
	  		<a @tap="$router.push({path:'/notice'})" style="background:#DD524D;">
	  			<span class="iconfont icongonggao1"></span>
	  		</a>
	  		<span>公告</span>
	  	</div>
	  </div>
	  
	  <!-- 图文列表 -->
	  <div id="cpList">
	  	<div class="item">
			<router-link to="/xyft">
	  			<h5>幸运飞艇</h5>
	  			<span class="xq">详情</span>
	  			<img src="@/assets/img/xyft.png">
	  			<div class="info">
	  				<p>开奖号码：<span v-if="curDataXYFT">{{curDataXYFT.one}}{{curDataXYFT.two}}{{curDataXYFT.three}}{{curDataXYFT.four}}{{curDataXYFT.five}}{{curDataXYFT.six}}{{curDataXYFT.seven}}{{curDataXYFT.eight}}{{curDataXYFT.nine}}{{curDataXYFT.ten}}</span></p>
	  				<p>当前期数：<span v-if="curDataXYFT">{{curDataXYFT.issue}}</span></p>
	  				<p>剩余时间：<span class="time">{{hmsXYFT}}</span></p>
	  			</div>
	  		</router-link>
	  	</div>
	  	<div class="item">
	  		<router-link to="/jssc">
	  			<h5>极速赛车</h5>
	  			<span class="xq">详情</span>
	  			<img src="@/assets/img/jssc.png">
	  			<div class="info">
	  				<p>开奖号码：<span v-if="curDataJSSC">{{curDataJSSC.one}}{{curDataJSSC.two}}{{curDataJSSC.three}}{{curDataJSSC.four}}{{curDataJSSC.five}}{{curDataJSSC.six}}{{curDataJSSC.seven}}{{curDataJSSC.eight}}{{curDataJSSC.nine}}{{curDataJSSC.ten}}</span></p>
	  				<p>当前期数：<span v-if="curDataJSSC">{{curDataJSSC.issue}}</span></p>
	  				<p>剩余时间：<span class="time">{{hmsJSSC}}</span></p>
	  			</div>
	  		</router-link>
	  	</div>
		<div class="item">
			<router-link to="/jsft">
				<h5>极速飞艇</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/jsft.png">
				<div class="info">
					<p>开奖号码：<span v-if="curDataJSFT">{{curDataJSFT.one}}{{curDataJSFT.two}}{{curDataJSFT.three}}{{curDataJSFT.four}}{{curDataJSFT.five}}{{curDataJSFT.six}}{{curDataJSFT.seven}}{{curDataJSFT.eight}}{{curDataJSFT.nine}}{{curDataJSFT.ten}}</span></p>
					<p>当前期数：<span v-if="curDataJSFT">{{curDataJSFT.issue}}</span></p>
					<p>剩余时间：<span class="time">{{hmsJSFT}}</span></p>
				</div>
			</router-link>
		</div>
		<div class="item">
			<router-link to="/txffc">
				<h5>腾讯分分彩</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/txffc.png">
				<div class="info">
					<p>开奖号码：<span v-if="curDataTXFFC">{{curDataTXFFC.one}}{{curDataTXFFC.two}}{{curDataTXFFC.three}}{{curDataTXFFC.four}}{{curDataTXFFC.five}}</span></p>
					<p>当前期数：<span v-if="curDataTXFFC">{{curDataTXFFC.issue}}</span></p>
					<p>剩余时间：<span class="time">{{hmsTXFFC}}</span></p>
				</div>
			</router-link>
		</div>
		<div class="item">
			<router-link to="/hn5fc">
				<h5>河内五分彩</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/hnwfc.png">
				<div class="info">
					<p>开奖号码：<span v-if="curDataHN5FC">{{curDataHN5FC.one}}{{curDataHN5FC.two}}{{curDataHN5FC.three}}{{curDataHN5FC.four}}{{curDataHN5FC.five}}</span></p>
					<p>当前期数：<span v-if="curDataHN5FC">{{curDataHN5FC.issue}}</span></p>
					<p>剩余时间：<span class="time">{{hmsHN5FC}}</span></p>
				</div>
			</router-link>
		</div>
		<div class="item">
			<a href="#">
				<h5>重庆时时彩</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/chongqing.png">
				<div class="info">
					<p>开奖号码：</p>
					<p>当前期数：</p>
					<p>剩余时间：</p>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<h5>PC蛋蛋</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/pcdandan.png">
				<div class="info">
					<p>开奖号码：</p>
					<p>当前期数：</p>
					<p>剩余时间：</p>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<h5>广西快三</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/gxks.png">
				<div class="info">
					<p>开奖号码：</p>
					<p>当前期数：</p>
					<p>剩余时间：</p>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<h5>广东快乐10分</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/gdkl10.png">
				<div class="info">
					<p>开奖号码：</p>
					<p>当前期数：</p>
					<p>剩余时间：</p>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#">
				<h5>河北11选5</h5>
				<span class="xq">详情</span>
				<img src="@/assets/img/hebei11-5.png">
				<div class="info">
					<p>开奖号码：</p>
					<p>当前期数：</p>
					<p>剩余时间：</p>
				</div>
			</a>
		</div>
	  </div>
		<!-- 客服二维码 -->
		<div v-show="showCustomer" @tap="showCustomer=false" id="cusQrcode">
			<div>
				<img :src="kefu1">
				<p>客服QQ扫码</p>
			</div>
			<div v-if="kefu2">
				<img :src="kefu2">
				<p>客服QQ扫码</p>
			</div>
		</div>
	</div>
</pullRefresh>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {allNotice,findAllLastLottery,countDown,getLotteryCode} from "@/api/begin"
import {s_to_hms} from "@/utils/public.js"
export default {
  name: 'home',
  components:{
	  pullRefresh
  },
  data(){
	  return{
		notice:"",	//公告
		noticInterval:null,		//公告滚动计时器
		countDownXYFT:0,		//幸运飞艇倒计时秒数
		countDownJSSC:0,		//极速赛车倒计时秒数
		countDownJSFT:0,		//极速飞艇倒计时秒数
		countDownTXFFC:0,		//腾讯分分彩倒计时秒数
		countDownHN5FC:0,		//河内五分彩倒计时秒数
		
		intervalXYFT:null,		//倒计时定时器(幸运飞艇)
		TimeOutXYFT:null,		//倒计时延迟30s定时器
		intervalJSSC:null,		//倒计时定时器(极速赛车)
		intervalJSFT:null,		//倒计时定时器(极速飞艇)
		intervalTXFFC:null,		//倒计时定时器(腾讯分分彩)
		intervalHN5FC:null,		//倒计时定时器(河内五分彩)
		intervalState:true,
		
		curDataXYFT:null,		//幸运飞艇当前数据
		curDataJSSC:null,		//极速赛车当前数据
		curDataJSFT:null,		//极速飞艇当前数据
		curDataTXFFC:null,		//腾讯分分彩当前数据
		curDataHN5FC:null,		//河内五分彩当前数据
		
		nextISSUE_XYFT:null,		//下一期期号幸运飞艇
		nextISSUE_JSSC:null,     //下一期期号极速赛车
		nextISSUE_JSFT:null,		//下一期期号极速飞艇
		nextISSUE_TXFFC:null,		//下一期期号腾讯分分彩
		nextISSUE_HN5FC:null,		//下一期期号河内五分彩
		
		showCustomer:false,		//客服
		
		getLotteryCodeFlagNum:1		//请求下一期彩票次数记录，超过50次刷新
	  }
  },
  computed:{
	  hmsXYFT(){
		return this.countDownXYFT==0?"等待开奖":s_to_hms(this.countDownXYFT)
	  },
	  hmsJSSC(){
		return this.countDownJSSC==0?"等待开奖":s_to_hms(this.countDownJSSC)
	  },
	  hmsJSFT(){
		return this.countDownJSFT==0?"等待开奖":s_to_hms(this.countDownJSFT)
	  },
	  hmsTXFFC(){
		return this.countDownTXFFC==0?"等待开奖":s_to_hms(this.countDownTXFFC)
	  },
	  hmsHN5FC(){
	  	return this.countDownHN5FC==0?"等待开奖":s_to_hms(this.countDownHN5FC)
	  }
  },
  watch:{
	countDownXYFT(val){	//幸运飞艇结束请求下一期
		if(val==0){	//延迟30秒再请求
			this.TimeOutXYFT = setTimeout(()=>{
				this.newLottery("XYFT")
				clearTimeout(this.TimeOutXYFT)
			},30000)
		}
	},
	countDownJSSC(val){	//极速赛车结束请求下一期
		if(val==1){	//提前1秒请求
			this.newLottery("JSSC")
		}
	},
	countDownJSFT(val){	//极速飞艇结束请求下一期
		if(val==1){	//提前1秒请求
			this.newLottery("JSFT")
		}
	},
	countDownTXFFC(val){	//腾讯分分彩结束请求下一期
		if(val==1){	//提前1秒请求
			this.newLottery("TXFFC")
		}
	},
	countDownHN5FC(val){	//河内5分彩结束请求下一期
		if(val==1){	//提前1秒请求
			this.newLottery("HN5FC")
		}
	},
  },
  mounted(){
	//初始化
	this.mountedInit()
  },
  methods:{
	 mountedInit(callback){	//初始化执行
		//幻灯片执行
		mui(".mui-slider").slider({
			interval: 2000
		});
		
		mui.showLoading();
		
		//公告
		allNotice().then(res=>{
			if(res instanceof Array){
				this.notice = res[0].name;
			}
		})
		
		//请求倒计时
		countDown().then(res=>{	//倒计时数据
			this.countDownXYFT = res.XYFT	//幸运飞艇
			this.countDownJSSC = res.JSSC	//极速赛车
			this.countDownJSFT = res.JSFT	//极速飞艇
			this.countDownHN5FC = res.HN5FC	//极速飞艇
			this.countDownTXFFC = res.TXFFC	//腾讯分分彩
			this.setCountDown("XYFT")
			this.setCountDown("JSSC")
			this.setCountDown("JSFT")
			this.setCountDown("HN5FC")
			this.setCountDown("TXFFC")
			//请求首页所有彩票数据
			return findAllLastLottery()
		}).then(res=>{	//首页彩票数据
			res.forEach(item=>{
				this["curData"+item.lottery.type] = item.lottery;
				this["nextISSUE_"+item.lottery.type] = item.nextIssue;
			})
			mui.hideLoading()
			callback && callback()
		})
		
		//公告自动滚动
		var speed = 1,
			curLeft = 0,
			$txt = document.querySelector("#notice>.txt"),
			$aTxt = document.querySelector("#notice>.txt>a");
		var aTxtWidth = $aTxt.offsetWidth,
			txtWidth = $txt.offsetWidth;
		if (aTxtWidth > txtWidth) {
			this.noticInterval = setInterval(function() {
				curLeft += speed;
				if (curLeft > aTxtWidth - txtWidth + 5) {
					curLeft = 0
				}
				$txt.scrollTo(curLeft, 0)
			}, 40)
		}
	 },
	 setCountDown(cpName){	//倒计时计时器
		 let interval = setInterval(()=>{
			 if(!this.intervalState){
				 clearInterval(this["interval"+cpName]);
				 clearInterval(interval)
			 }
			this["countDown"+cpName]--
			if(this["countDown"+cpName]<=0){
				interval = null;
				clearInterval(this["interval"+cpName]);
			}
		},1000)
		this["interval"+cpName] = interval
	 },
	 newLottery(type){	//递归请求下一期彩票数据
		//下一期期号
		let ISSUE = this["nextISSUE_"+type]
		getLotteryCode(ISSUE,type).then(res=>{
			if(res.status){
				this["curData"+type] = res.current;
				this["nextISSUE_"+type] = res.nextISSUE;
				//请求倒计时
				countDown().then(res=>{
					this["countDown"+type] = res[type]
					clearInterval(this["interval"+type]);
					this.setCountDown(type)
				})
			}else{
				this.getLotteryCodeFlagNum++
				
				if(this.getLotteryCodeFlagNum>this.nextLotteryRqTh){
					mui.toast("网络延迟,即将刷新系统")
					//刷新页面
					this.toRefresh()
					return;
				}
				
				let sleep = null;
								
				if(!this.intervalState){
					clearTimeout(sleep);
					return;
				}
				
				sleep = setTimeout(()=>{
					this.newLottery(type)
					clearTimeout(sleep)
				},2000)
			}
		})
	 },
	 closeAllTimer(){
		 this.intervalState = false;
		 clearInterval(this.noticInterval)
		 clearTimeout(this.TimeOutXYFT)
		 clearInterval(this.intervalXYFT)
		 clearInterval(this.intervalJSSC)
		 clearInterval(this.intervalJSFT)
		 clearInterval(this.intervalTXFFC)
		 clearInterval(this.intervalHN5FC)
	 },
	 toRefresh(callback){
		 //关闭定时器以防出错
		 this.closeAllTimer()
		 //这里进行重新加载数据操作
		 this.mountedInit(()=>{
			this.intervalState = true;
			callback()
		 })
	 }
  },
  destroyed(){
	//清除计时器
	this.closeAllTimer()
  }
}
</script>

<style scoped>
#app{padding-bottom:5px;}
#notice{position:absolute;z-index:2;background:rgba(0,0,0,.5);width:100%;height:26px;line-height:26px}
#notice>div{color:#fff;font-size:14px;position:absolute;height:26px;line-height:26px}
#notice div.iconfont{left:5px}
#notice div.txt{left:66px;white-space:nowrap;width:calc(100% - 66px);overflow:hidden;text-align: left;}
#notice div.txt a{color:#fff;text-decoration:none;height:26px;display:inline-block;line-height:26px;padding-top:1px}
#cpList{margin-bottom:70px}
#cpList .item a{display:flex;justify-content:flex-start;margin:10px 20px 20px;box-shadow:3px 3px 8px 2px #c46d53;border-radius:10px;padding:35px 10px 10px 10px;position:relative}
#cpList .item h5{position:absolute;top:6px;left:10px;border-left:3px solid #d56404;padding-left:5px;color:#000}
#cpList .item span.xq{position:absolute;top:6px;right:10px;color:#000;font-size:13px}
#cpList .item img{width:auto;height:100px;border-radius:10px;margin-right:15px}
#cpList .item .info p{color:#333;text-align: left;}
#cpList .item .info p>span.time{color:#d56404;font-weight: 700;}
#desktop-menu{margin: 0;padding:5vw 8vw;background: #fff}
</style>
